<!DOCTYPE html>
<html lang="cn">

<head>
	<title>分类页面</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		*{
			list-style: none;
		}
		.redColor {
			color: #C40000 !important;
		}

		nav.top {
			background-color: #f2f2f2;
			padding-top: 5px;
			padding-bottom: 5px;
			border-bottom: 1px solid #e7e7e7;
		}

		nav.top span,
		nav.top a {
			color: #999999;
			margin: 0px 10px 0px 10px;
		}

		nav.top a:hover {
			color: #C40000;
			text-decoration: none;
		}

		.simpleSearchDiv {
			background-color: #C40000;
			margin: 10px 20px 40px 0;
			width: 300px;
			height: 40px;
			display: block;
			padding: 1px;
		}

		.simpleSearchDiv input {
			width: 225px;
			height: 34px;
			margin: 2px;
			border: 1px solid transparent;
			outline: none;
			padding-left: 10px;
		}

		.simpleSearchDiv button {
			width: 60px;
			background-color: #C40000;
			font-size: 14px;
			color: white;
			border: 1px solid transparent;
			vertical-align: middle;
			outline: none;
		}

		img.simpleLogo {
			position: absolute;
			top: 50px;
			left: 10px;
			width: 140px;
		}

		.searchBelow {
			margin-top: 3px;
			margin-left: -20px;
		}

		.searchBelow span {
			color: #999999;
		}

		.searchBelow a {
			padding: 0 20px 0 20px;
			font-size: 14px;
		}

		a {
			color: #999999;
		}

		a:hover {
			color: #C40000;
			text-decoration: none;
		}

		.searchDiv {
			background-color: #C40000;
			width: 400px;
			height: 40px;
			padding: 1px;
			display: block;
			margin: 50px auto;
		}

		.searchDiv input {
			width: 275px;
			height: 36px;
			margin: 1px;
			border: 1px solid transparent;
			outline: none;
			padding-left: 10px;
		}

		.searchDiv button {
			width: 110px;
			border: 1px solid transparent;
			background-color: #C40000;
			outline: none;
			color: white;
			font-size: 20px;
			font-weight: bold;
			vertical-align: middle;
		}

		.searchBelow {
			margin-top: 3px;
			margin-left: -20px;
		}

		.searchBelow span {
			color: #999999;
		}

		.searchBelow a {
			padding: 0 20px 0 20px;
			font-size: 14px;
		}

		img.logo {
			position: absolute;
			left: 0px;
			top: 30px;
			z-index: -1;
		}

		div.footer {
			margin: 0px 0px;
			border-top: 1px solid #e7e7e7;
		}

		div.footer_ensure {
			margin: 24px 0 24px 0;
			text-align: center;
		}

		div.footer_desc {
			border-top: 1px solid #e7e7e7;
			margin: 0px 20px;
			padding-top: 30px;
		}

		div.footer_desc div.descColumn {
			width: 20%;
			float: left;
			padding-left: 15px;
		}

		div.footer_desc div.descColumn span.descColumnTitle {
			color: #646464;
			font-weight: bold;
			font-size: 16px;
		}

		div.footer_desc a {
			display: block;
			padding-top: 3px;
		}

		div.copyright {
			background-color: #000000;
			border-top: 2px solid #C40000;
		}

		div.copyright span.slash {
			color: #ffffff;
		}

		div.footer div.copyright div.white_link a {
			color: #ffffff;
			padding: 0px 5px;
		}

		div.footer div.copyright div.white_link {
			padding: 10px 0px;
			margin-left: 10px;
		}

		div.license {
			margin-left: 10px;
			padding-bottom: 30px;
		}

		div.license span {
			color: #A4A4A4;
		}

		div.license div.copyRightYear {
			margin: 10px 0;
			color: #686868;
		}

		img.cateye {
			margin-left: 20px;
		}

		div.categoryPageDiv {
			max-width: 1013px;
			margin: 10px auto;
		}

		div.categorySortBar {
			background-color: #FAF9F9;
			margin: 40px 20px 20px 20px;
			padding: 4px;
		}

		table.categorySortBarTable {
			border-collapse: collapse;
			display: inline-block;
		}

		table.categorySortBarTable span.glyphicon {
			font-size: 10px;
		}

		table.categorySortBarTable td {
			height: 17px;
			font-size: 12px;
			border: 1px solid #CCCCCC;
			padding: 3px;
		}

		table.categorySortBarTable td.grayColumn {
			background-color: #F1EDEC;
		}

		table.categorySortBarTable td a {
			color: #806F66;
			text-decoration: none;
		}

		table.categorySortBarTable td:hover {
			background-color: #F1EDEC;
		}

		table.categorySortBarTable td a:hover {
			color: #C40000;
			text-decoration: none;
		}

		table.categorySortBarTable input {
			border: none;
			height: 15px;
			width: 50px;
			outline: none;
			padding-left: 5px;
		}

		table.categorySortBarTable td.priceMiddleColumn {
			width: 5px;
			vertical-align: middle;
			color: #CCCCCC;
		}

		body {
			font-size: 12px;
			font-family: Arial;
		}

		body {
			font-size: 12px;
			font-family: Arial;
		}

		div.categoryPageDiv {
			max-width: 1013px;
			margin: 10px auto;
		}


		div.categoryPageDiv {
			max-width: 1013px;
			margin: 10px auto;
		}

		div.categorySortBar {
			background-color: #FAF9F9;
			margin: 40px 20px 20px 20px;
			padding: 4px;
		}

		table.categorySortBarTable {
			border-collapse: collapse;
			display: inline-block;
		}

		table.categorySortBarTable span.glyphicon {
			font-size: 10px;
		}

		table.categorySortBarTable td {
			height: 17px;
			font-size: 12px;
			border: 1px solid #CCCCCC;
			padding: 3px;
		}

		table.categorySortBarTable td.grayColumn {
			background-color: #F1EDEC;
		}

		table.categorySortBarTable td a {
			color: #806F66;
			text-decoration: none;
		}

		table.categorySortBarTable td:hover {
			background-color: #F1EDEC;
		}

		table.categorySortBarTable td a:hover {
			color: #C40000;
			text-decoration: none;
		}

		table.categorySortBarTable input {
			border: none;
			height: 15px;
			width: 50px;
			outline: none;
			padding-left: 5px;
		}

		table.categorySortBarTable td.priceMiddleColumn {
			width: 5px;
			vertical-align: middle;
			color: #CCCCCC;
		}

		body {
			font-size: 12px;
			font-family: Arial;
		}

		.sk_bd {
			margin-top: 25px;
			background-color: #fff;
			overflow: hidden;
		}

		.sk_bd ul {
			width: 1212px;
		}

		.sk_goods {
			color: #666;
			width: 288px;
			height: 410px;
			border: 1px solid transparent;
			/* transparent透明色 */
			position: relative;
			float: left;
			margin: 0 10px 15px 0;
		}

		.sk_goods:hover {
			border: 1px solid #e01222;
		}

		.sk_goods img {
			display: block;
			margin: 0px auto;
			height: 242px;
		}

		.sk_goods_title {
			font-size: 14px;
			font-weight: normal;
			padding: 10px 10px 15px;
		}

		.sk_goods_price {
			padding: 0 10px;
		}

		.sk_goods_price em {
			color: #e01222;
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
		}

		.sk_goods_price del {
			font-size: 14px;
			color: #a4a4a4;
		}

		.sk_goods_progress {
			font-size: 12px;
			padding: 10px 10px 0;
		}

		.bar {
			display: inline-block;
			/* 转化为行内块元素 */
			width: 130px;
			height: 10px;
			border: 1px solid #b1191a;
			vertical-align: middle;
			/* 居中对齐 */
			margin: 0 5px;
			border-radius: 5px;
		}

		.bar_in {
			height: 10px;
			background-color: #e01222;
			width: 87%;
		}

		.sk_goods_progress i,
		em {
			color: #e01222;
			font-style: normal;
		}

		.sk_goods_buy {
			position: absolute;
			bottom: 0;
			width: 100%;
			background-color: #e01222;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-size: 20px;
		}

		.sk_goods_buy:hover {
			color: #fff;
			text-decoration: underline;
		}
		.pagination  {
    text-align: center;
    margin:  40px  330px;
}
.sk_page{
	text-align: center;
}
.page_num a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #ccc;
	text-decoration: none;
}
.page_num .pn-prev,
.page_num .pn-next {
    width: 83px;
}
.page_num .dotted,
.page_num .current {
    border: 1px solid transparent;
    background-color: transparent;
}
.page_skip {
    font-size: 14px;
    color: #333;
}
.page_skip input {
    width: 46px;
    height: 36px;
    border: 1px solid #ccc;
    text-align: center;
}
.page_skip button {
    width: 54px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
}
.page_skip button:hover {
    border: 1px solid #f8061a;
    background-color: #e01222;
    color: #fff;
}
	</style>
	<!-- <script>
		$(function () {
			$("input.sortBarPrice").keyup(function () {
				var num = $(this).val();
				if (num.length == 0) {
					$("div.productUnit").show();
					return;
				}

				num = parseInt(num);
				if (isNaN(num))
					num = 1;
				if (num <= 0)
					num = 1;
				$(this).val(num);

				var begin = $("input.beginPrice").val();
				var end = $("input.endPrice").val();
				if (!isNaN(begin) && !isNaN(end)) {
					$("div.productUnit").hide();
					$("div.productUnit").each(function () {
						var price = $(this).attr("price");
						price = new Number(price);
						if (price <= end && price >= begin)
							$(this).show();
					});
				}

			});
		});
	</script> -->
</head>

<body>
	<nav class="top">
		<a href="index.html?ReturnUrl=./list.html">
			<span class="glyphicon glyphicon-home redColor"></span>
			天猫首页
		</a>

		<span>喵，欢迎来到天猫</span>
		<a href="login.html?ReturnUrl=./list.html">请登录</a>
		<a href="register.html">免费注册</a>

		<span class="pull-right">
			<a href="order.html?ReturnUrl=./list.html">我的订单</a>
			<a href="car.html?ReturnUrl=./list.html">
				<span class="glyphicon glyphicon-shopping-cart redColor"></span>
				购物车<storage>0</storage>件
			</a>
		</span>
	</nav>

	<div>
		<a href="#nowhere"><img alt="logo" class="logo" id="logo" src="https://how2j.cn/tmall/img/site/logo.gif"></a>
		<div class="searchDiv">
			<input name="keyword" placeholder="时尚男鞋  太阳镜" type="text">
			<button type="submit">搜索</button>
			<div class="searchBelow">
				<span><a href="#nowhere">平衡车</a><span>|</span></span>
				<span><a href="#nowhere">扫地机器人</a><span>|</span></span>
				<span><a href="#nowhere">原汁机</a><span>|</span></span>
				<span><a href="#nowhere">冰箱</a></span>
			</div>
		</div>
	</div>

	<div class="categoryPageDiv">
		<img src="https://how2j.cn/tmall/img/category/72.jpg">
		<div class="categorySortBar">
			<table class="categorySortBarTable categorySortTable">
				<tbody>
					<tr>
						<td class="grayColumn"><a href="#nowhere">综合<span
									class="glyphicon glyphicon-arrow-down"></span></a>
						</td>
						<td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
						<td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
					</tr>
				</tbody>
			</table>
			<table class="categorySortBarTable">
				<tbody>
					<tr>
						<td><input class="sortBarPrice beginPrice" placeholder="请输入" type="text"></td>
						<td class="grayColumn priceMiddleColumn">-</td>
						<td><input class="sortBarPrice endPrice" placeholder="请输入" type="text"></td>
					</tr>
				</tbody>
			</table>
		</div>

	<div class="sk_bd">
	<ul>
		<!--       <li class="sk_goods">
			<a href="detail.html"><img src="uploads/mobile.jpg" alt=""></a>
			<h5 class="sk_goods_title">【超级爆款】华为 HUAWEI P30 Pro 超感光徕卡四摄10倍混合变焦麒麟980芯片屏</h5>
			<p class="sk_goods_price"><em>¥4758.00</em> <del>￥5488</del></p>
			<div class="sk_goods_progress">
				已售<i>87%</i>
				<div class="bar">
					<div class="bar_in"></div>
				</div>
				剩余<em>29</em>件
			</div>
			<a href="detail.html" class="sk_goods_buy">立即抢购</a>
		</li> -->

	</ul>
</div>
<div class="sk_page">
	<!-- <span class="page_num">
		<a href="#" class="pn-prev">&lt;&lt; 上一页</a>
		<a href="#"class="current">1</a>
		<a href="#" >2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#" class="dotted">...</a>
		<a href="#" class="pn-next">下一页&gt;&gt;</a>
	</span>
	<span class="page_skip">
		共10页 到第
		<input type="text"> 页
		<button>确定</button>
	</span> -->
</div>
<!-- <nav aria-label="Page navigation">
	<ul class="pagination pagination-lg">
		<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
		<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	  <li><a href="#">2</a></li>
	  <li><a href="#">3</a></li>
	  <li><a href="#">4</a></li>
	  <li><a href="#">5</a></li>
	  <li>
		<a href="#" aria-label="Next">
		  <span aria-hidden="true">&raquo;</span>
		</a>
	  </li>
	</ul>
  </nav> -->
</div>
		

		<div class="footer" id="footer" style="display: block;">
			<div class="footer_ensure" id="footer_ensure">
				<a href="#nowhere">
					<img src="https://how2j.cn/tmall/img/site/ensure.png">
				</a>
			</div>
			<div class="footer_desc" id="footer_desc">
				<div class="descColumn">
					<span class="descColumnTitle">购物指南</span>
					<a href="#nowhere">免费注册</a>
					<a href="#nowhere">开通支付宝</a>
					<a href="#nowhere">支付宝充值</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">天猫保障</span>
					<a href="#nowhere">发票保障</a>
					<a href="#nowhere">售后规则</a>
					<a href="#nowhere">缺货赔付</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">支付方式</span>
					<a href="#nowhere">快捷支付</a>
					<a href="#nowhere">信用卡</a>
					<a href="#nowhere">蚂蚁花呗</a>
					<a href="#nowhere">货到付款</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">商家服务</span>
					<a href="#nowhere">商家入驻</a>
					<a href="#nowhere">商家中心</a>
					<a href="#nowhere">天猫智库</a>
					<a href="#nowhere">天猫规则</a>
					<a href="#nowhere">物流服务</a>
					<a href="#nowhere">喵言喵语</a>
					<a href="#nowhere">运营服务</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">手机天猫</span>
					<a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a>
				</div>
			</div>
			<div style="clear:both"></div>

			<img class="cateye" id="cateye" src="https://how2j.cn/tmall/img/site/cateye.png">
			<div class="copyright" id="copyright">
				<div class="white_link">
					<a href="#nowhere">关于天猫</a>
					<a href="#nowhere"> 帮助中心</a>
					<a href="#nowhere">开放平台</a>
					<a href="#nowhere"> 诚聘英才</a>
					<a href="#nowhere">联系我们</a>
					<a href="#nowhere">网站合作</a>
					<a href="#nowhere">法律声明</a>
					<a href="#nowhere">知识产权</a>
					<a href="#nowhere"> 廉正举报 </a>
				</div>
				<div class="white_link">
					<a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span>
					<a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
					<a href="#nowhere">天猫 </a><span class="slash">|</span>
					<a href="#nowhere"> 聚划算</a><span class="slash">|</span>
					<a href="#nowhere">全球速卖通</a><span class="slash">|</span>
					<a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
					<a href="#nowhere">1688</a><span class="slash">|</span>
					<a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
					<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
					<a href="#nowhere"> 阿里云计算 </a><span class="slash">|</span>
					<a href="#nowhere"> 阿里通信 </a><span class="slash">|</span>
					<a href="#nowhere"> YunOS </a><span class="slash">|</span>
					<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
					<a href="#nowhere"> 万网 </a><span class="slash">|</span>
					<a href="#nowhere"> 高德 </a><span class="slash">|</span>
					<a href="#nowhere"> 优视 </a><span class="slash">|</span>
					<a href="#nowhere"> 友盟 </a><span class="slash">|</span>
					<a href="#nowhere"> 虾米 </a><span class="slash">|</span>
					<a href="#nowhere"> 天天动听 </a><span class="slash">|</span>
					<a href="#nowhere"> 来往 </a><span class="slash">|</span>
					<a href="#nowhere"> 钉钉 </a><span class="slash">|</span>
					<a href="#nowhere"> 支付宝 </a>
				</div>
				<div class="license">
					<span>增值电信业务经营许可证： 浙B2-20110446</span>
					<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
					<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
					<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
					<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
					<div>
						<img src="https://how2j.cn/tmall/img/site/copyRight1.jpg">
						<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
					</div>
				</div>
			</div>
		</div>
		<script src="./lib/jquery-2.2.4.js"></script>
		<script src="./lib/layer/layer.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/list.js"></script>
</body>

</html>